<template>
  <view class="container" :style="containerStyle">
    <view class="container-title">
      <image :src="image_hosts+'/icon_sp_wenda.png'"></image>
      <text>问题</text>
    </view>
    <view class="answer-item" v-for="(item,index) in questionList">
      <view class="answer-title">
        <text class="answer-icon"></text>
        <text>{{ item.question }}</text>
        <text v-if="item.questionType===2 && item.multiple===2">(多选)</text>
        <text v-else>(单选)</text>
      </view>
      <!--      单选-->
      <view class="subject-item" v-if="item.questionType===1"
            :class="item.current_choose === answersIndex?'subject-item-hove':''"
            v-for="(answersItem,answersIndex) in item.answers" @click="$emit('choose_answer',index,answersIndex)">
        <text>{{ answersItem }}</text>
      </view>
      <!--      问卷--单选-->
      <view class="subject-item" v-if="item.questionType===2 && item.multiple===1"
            :class="item.current_choose === answersIndex?'subject-item-hove':''"
            v-for="(answersItem,answersIndex) in item.answers" @click="$emit('choose_answer',index,answersIndex)">
        <text>{{ answersItem }}</text>
      </view>
      <!--      问卷&#45;&#45;多选-->
      <view class="subject-item" v-if="item.questionType===2 && item.multiple===2"
            :class="item && item.all_choose?item.all_choose.includes(answersIndex)?'subject-item-hove':'':''"
            v-for="(answersItem,answersIndex) in item.answers" @click="$emit('choose_answer',index,answersIndex,1)">
        <text>{{ answersItem }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['questionList', 'type'],
  data() {
    return {
      image_hosts: this.image_host + 'videoAnswer',
      containerStyle: ""
    };
  },
  created() {
    this.containerStyle = "--border-color:#D4F0E1;"
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  border-radius: 40upx;
  box-sizing: border-box;
  border: 6upx solid var(--border-color);
  position: relative;
  padding: 88upx 20upx;
  padding-bottom: 0upx;
  //#ifdef H5
  overflow: auto;
  //#endif
}

.container-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: var(--border-color);
  width: 220upx;
  height: 60upx;
  border-radius: 0 0 26upx 26upx;
  font-size: 28upx;
  color: #24B363;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 36upx;
    height: 36upx;
    margin-right: 8upx;
  }
}

.answer-title {
  width: 100%;
  font-size: 38upx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 13upx;

  .answer-icon {
    display: inline-block;
    width: 10upx;
    height: 30upx;
    background-color: #24B364;
    border-radius: 4upx;
    margin-right: 20upx;
  }
}

.subject-item {
  width: 100%;
  background-color: #F6F6F6;
  border-radius: 16upx;
  font-size: 36upx;
  color: #666666;
  font-weight: 500;
  box-sizing: border-box;
  padding: 20upx;
  margin-bottom: 24upx;
  border: 2upx solid #F6F6F6;
}

.subject-item-hove {
  background-color: #ECF6F0;
  border: 2upx solid #24B363;
  color: #24B363;
}
</style>
